import React from 'react';
import { useNavigate, useLocation, Routes, Route } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import styled, { ThemeProvider } from 'styled-components';
import { theme } from './theme';
import CommunicationRoom from './pages/CommunicationRoom';
import ControlPanel from './pages/ControlPanel';
import AdminPanel from './pages/AdminPanel';
import MonitoringRoom from './pages/MonitoringRoom';

const { Header, Content } = Layout;

const StyledLayout = styled(Layout)`
  min-height: 100vh;
  background: ${({ theme }) => theme.token.colorBgBase};
`;

const StyledHeader = styled(Header)`
  background: linear-gradient(45deg, #002FA7 0%, #1A237E 100%);
  padding: 0 50px;
  box-shadow: 0 4px 12px rgba(0, 47, 167, 0.15);
  height: 80px;
  line-height: 80px;
`;

const StyledMenu = styled(Menu)<{ theme?: 'light' | 'dark' }>`
  background: transparent !important;
  border-bottom: none !important;
  color: white;
  font-weight: 500;
  font-size: 18px;
  
  .ant-menu-item {
    height: 80px !important;
    line-height: 80px !important;
    color: white !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:not(.ant-menu-item-selected):hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }

  .ant-menu-item-selected {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 3px solid #FF5252 !important;
  }
`;

const App: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <ThemeProvider theme={theme}>
      <StyledLayout>
        <StyledHeader>
          <StyledMenu
            mode="horizontal"
            selectedKeys={[location.pathname]}
            items={[
              { 
                key: '/', 
                label: '交流室',
                onClick: () => navigate('/') 
              },
              { 
                key: '/control', 
                label: '控制台',
                onClick: () => navigate('/control')
              },
              { 
                key: '/admin', 
                label: '后台',
                onClick: () => navigate('/admin')
              },
              { 
                key: '/monitor', 
                label: '监控室',
                onClick: () => navigate('/monitor')
              }
            ]}
          />
        </StyledHeader>
        <Content style={{ padding: '24px 50px' }}>
          <Routes>
            <Route path="/" element={<CommunicationRoom />} />
            <Route path="/control" element={<ControlPanel />} />
            <Route path="/admin" element={<AdminPanel />} />
            <Route path="/monitor" element={<MonitoringRoom />} />
          </Routes>
        </Content>
      </StyledLayout>
    </ThemeProvider>
  );
};

export default App;